<template>
  <div class="app-container">
    <el-form ref="contract" :model="contract" :rules="rules" label-width="100px" class="demo-ruleForm" style="max-width: 500px;">
      <h4>{{contractInfo.adname}} 新增充值</h4>
      <el-divider></el-divider>
      <el-form-item label="充值账户" prop="mht_id">
        <McontractSelect v-on:func="selectMcontract"></McontractSelect>
      </el-form-item>
      <el-form-item label="充值时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择充值日期" value-format="yyyy-MM-dd" v-model="contract.start" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="金额" prop="money">
        <el-input v-model="contract.money" @change="showMoney" select	/>
      </el-form-item>
      <el-form-item label="返点" prop="rebate" >
        <el-input v-model="contractInfo.rebate" @change="showMoney" :disabled="true">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="显示金额" prop="show_money">
        <el-input v-model="contract.show_money" :disabled="true"/>
      </el-form-item>
      <el-form-item label="付款方式" prop="pay_type">
        <el-radio-group v-model="contract.pay_type">
          <el-radio-button label="1">预付</el-radio-button>
          <el-radio-button label="2">垫付</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="回款周期" prop="cycle" v-show="contract.pay_type==2">
        <el-input v-model="contractInfo.cycle" :disabled="true">
          <template slot="append">天</template>
        </el-input>
      </el-form-item>

      <el-form-item label="备注" prop="note">
        <el-input  type="textarea" v-model="contract.note" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('contract')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    import Resource from '@/api/resource';
    import McontractSelect from '@/components/CrmComponents/mhtSelect.vue';

    const apiResource = new Resource('contract');

    export default {
        name: 'Add',
        data() {
            return {
                contractInfo:[],
                recharge: {
                    advertiser:this.$route.query.id,
                    contract_no: '',
                    mht_id: '',
                    type:1,
                    start:'',
                    end:'',
                    money:'',
                    rebate:0,
                    show_money:0,
                    note:'',
                    cycle:'',
                    pay_type:1
                },
                rules: {
                    contract_no: [
                        { required: true, message: '请输入合同编号', trigger: 'blur' },
                    ],
                    mht_id: [
                        { required: true, message: '请选择媒体政策', trigger: 'blur'},
                    ],
                    money: [
                        { required: true, message: '请输入金额', trigger: 'blur'},
                    ],
                    rebate:[
                        { required: true, message: '请输入返点', trigger: 'blur' },
                    ]
                },
            };
        },
        created(){
            this.setContractOn()
            this.getInfo(this.$route.query.id)
        },
        methods: {
            async getInfo(id){
                this.loading=true;
                const { data } = await apiResource.get(id);
                this.contractInfo = data;
                this.loading=false;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.createContract();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            createContract(){
                apiResource.store(this.contract)
                    .then(response => {
                        this.$message({
                            message: '恭喜,添加成功.',
                            type: 'success',
                            duration: 5 * 1000,
                        });
                        this.$router.push({ name: 'contractList' });
                    }).catch(error => {
                    console.log(error);
                });


            },
            showMoney(){
                let money = parseInt(this.contract.money);
                let fandian = parseInt(this.contract.rebate);
                //let dl_fandian = parseInt(this.contract.dl_rebate);
                this.contract.show_money=(money*(1+fandian/100)).toFixed(2);
            },
            selectMcontract(mht_id){
                this.contract.mht_id=mht_id;
            },
            setContractOn(){
                const now = new Date()
                let month = now.getMonth() + 1
                let day = now.getDate()
                let hour = now.getHours()
                let minutes = now.getMinutes()
                let seconds = now.getSeconds()
                let no= now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 89 + 100)).toString()
                this.contract.contract_no=no;
            }
        },
        components:{
            "McontractSelect":McontractSelect
        }
    };
</script>

<style scoped>

</style>
